<template>
  <div class="relative flex bg-white rounded-lg overflow-hidden shadow-md mb-3" :class="cardOpacity">
    <!-- 左侧金额区域 -->
    <div class="w-25 flex flex-col justify-center items-center px-2 py-4 relative" :class="leftBgClass">
      <!-- 优惠券金额 -->
      <div class="flex flex-col items-center" :class="leftTextClass">
        <div class="flex items-baseline font-bold">
          <span class="text-sm mr-1">{{ isZh ? "¥" : "RM" }}</span>
          <span class="text-2xl leading-none">{{ formatToYuan(coupon.discountPrice) }}</span>
        </div>

        <span class="text-xs mt-2">
          {{ isZh ? `满${formatToYuan(coupon.usePrice)}元可用` : `Valid with a minimum spend of RM1 ${formatToYuan(coupon.minAmount)}` }}
        </span>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="flex-1 flex-col flex justify-between p-4">
        <!-- 优惠券标题 -->
        <div class="text-base font-medium mb-2" :class="titleClass">{{ coupon.name }}</div>

        <!-- 有效期 -->
        <div class="text-xs " :class="dateClass">{{ formatDate(coupon.validStartTime) }} - {{ formatDate(coupon.validEndTime) }}</div>
      </div>

    <!-- 优惠券装饰边框 -->
    <div class="absolute left-25 top-0 bottom-0 w-0">
      <!-- 上圆圈 -->
      <div class="absolute w-3 h-3 bg-gray-50 rounded-full -left-1.5 -top-1.5"></div>
      <!-- 下圆圈 -->
      <div class="absolute w-3 h-3 bg-gray-50 rounded-full -left-1.5 -bottom-1.5"></div>
      <!-- 虚线 -->
      <div class="absolute left-0 top-1.5 bottom-1.5 w-px border-l border-dashed border-gray-300"></div>
    </div>
  </div>
</template>

<script>
import { formatToYuan } from "@/utils/common"
import { mapGetters } from "vuex"
export default {
  name: "CouponCard",
  props: {
    coupon: {
      type: Object,
      required: true,
    },
    status: {
      type: String,
      default: "available", // available, used, expired
    },
  },
  data() {
    return {
      formatToYuan,
    }
  },
  computed: {
    cardOpacity() {
      return this.status === "used" || this.status === "expired" ? "opacity-70" : ""
    },
    leftBgClass() {
      return this.status === "available" ? "bg-gradient-to-br from-orange-300 to-orange-400 text-white" : "bg-gray-100 text-gray-500"
    },
    leftTextClass() {
      return this.status === "available" ? "text-white" : "text-gray-500"
    },
    titleClass() {
      return this.status === "available" ? "text-gray-800" : "text-gray-500"
    },
    dateClass() {
      return this.status === "available" ? "text-gray-600" : "text-gray-400"
    },
    ...mapGetters({
      isZh: "lang/isZh",
    }),
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return ""
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
    },

    handleUse() {
      if (this.status === "available") {
        this.$emit("use", this.coupon)
      }
    },
  },
}
</script>

<style scoped>
/* 自定义 Tailwind 类 */
.w-25 {
  width: 100px;
}

.left-25 {
  left: 100px;
}
</style>
